<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <ruby>
        <rb>旧</rb>
        <rb>金</rb>
        <rb>山</rb>
        <rt>jiù</rt>
        <rt>jīn</rt>
        <rt>shān</rt>
        <rtc>San Francisco</rtc>
    </ruby>
    <ruby>
        <rb>上</rb>
        <rb>手
            <rt>じよう
                <rt>ず
                    <rtc>
                        <rt>jou
                            <rt>zu</ruby>
    <input type="range" name="a" list="a-values">
    <datalist id="a-values">
        <option value="10" label="Low">
            <option value="90" label="High">
    </datalist>
    <input name=x type=range min=100 max=700 step=9 value=509>
    <select name="unittype" required>
        <option value=""> Select unit type </option>
        <option value="1"> Miner </option>
        <option value="2"> Puffer </option>
        <option value="3"> Snipey </option>
        <option value="4"> Max </option>
        <option value="5"> Firebot </option>
    </select>
    <label>
        Sex:
        <input name=sex list=sexes>
        <datalist id=sexes>
            <option value="Female">
                <option value="Male">
        </datalist>
    </label>
    <form action="courseselector.dll" method="get">
        <p>Which course would you like to watch today?
            <p>
                <label>Course:
                    <select name="c">
                        <optgroup label="8.01 Physics I: Classical Mechanics">
                            <option value="8.01.1">Lecture 01: Powers of Ten
                                <option value="8.01.2">Lecture 02: 1D Kinematics
                                    <option value="8.01.3">Lecture 03: Vectors
                                        <optgroup label="8.02 Electricity and Magnestism">
                                            <option value="8.02.1">Lecture 01: What holds our world together?
                                                <option value="8.02.2">Lecture 02: Electric Field
                                                    <option value="8.02.3">Lecture 03: Electric Flux
                                                        <optgroup label="8.03 Physics III: Vibrations and Waves">
                                                            <option value="8.03.1">Lecture 01: Periodic Phenomenon
                                                                <option value="8.03.2">Lecture 02: Beats
                                                                    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
                    </select>
                </label>
                <p>
                    <input type=submit value="▶ Play">
    </form>
    <p>如果您有任何意见，烦请告知我们：</p>
    <p>
        <textarea cols=80 name=comments></textarea>
    </p>
    <form action="processkey.cgi" method="post" enctype="multipart/form-data">
        <p>
            <keygen name="key">
        </p>
        <p>
            <input type=submit value="Submit key...">
        </p>
    </form>
    <form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
        <input name=a type=number step=any> +
        <input name=b type=number step=any> =
        <output name=o for="a b"></output>
    </form>
    <section>
        <h2>Task Progress</h2>
        <p>Progress:
            <progress id="p" max=100><span>0</span>%</progress>
        </p>
        <script>
        var progressBar = document.getElementById('p');

        function updateProgress(newValue) {
            progressBar.value = newValue;
            progressBar.getElementsByTagName('span')[0].textContent = newValue;
        }
        updateProgress(50);
        </script>
    </section>
    <p>The grapefruit pie had a radius of 12cm and a height of 2cm.
    </p>
    <dl>
        <dt>Radius:</dt>
        <dd>
            <meter min=0 max=20 value=12>12cm</meter>
        </dd>
        <dt>Height:</dt>
        <dd>
            <meter min=0 max=10 value=2>2cm</meter>
        </dd>
    </dl>
    <fieldset name="numfields">
        <legend>
            <label>
                <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"> My card has numbers on it
            </label>
        </legend>
        <div>
            <label>Card number:
                <input name=clubnum required pattern="[-0-9]+">
            </label>
        </div>
    </fieldset>
    <script>
    // Data is hard-coded here, but could come from the server
    var data = [{
        name: 'Pillar',
        color: 'Ticked Tabby',
        sex: 'Female (neutered)',
        legs: 3
    }, {
        name: 'Hedral',
        color: 'Tuxedo',
        sex: 'Male (neutered)',
        legs: 4
    }, ];
    </script>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Color</th>
                <th>Sex</th>
                <th>Legs</th>
            </tr>
        </thead>
        <tbody>
            <template id="row">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </template>
        </tbody>
    </table>
    <script>
    var template = document.querySelector('#row');
    for (var i = 0; i < data.length; i += 1) {
        var cat = data[i];
        var clone = template.content.cloneNode(true);
        var cells = clone.querySelectorAll('td');
        cells[0].textContent = cat.name;
        cells[1].textContent = cat.color;
        cells[2].textContent = cat.sex;
        cells[3].textContent = cat.legs;
        template.parentNode.appendChild(clone);
    }
    </script>
</body>

</html>
